<style type="text/css">
    .action-cell {
        margin-bottom: 20px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-between;
        align-items: center;
        margin-right: 20%;
    }

    .search-block {
        display: flex;
        margin-bottom: 10px;
    }

    .input-search {
        margin-right: 10px;
    }
</style>
<template>
    <div style="min-width: 1024px">
        <div class="action-cell">
            <div>
                <h4>人员管理列表</h4>
                <Alert show-icon>
                    此处用于人员管理列表。
                </Alert>
                <ButtonGroup>
                    <Button type="success" @click="jumpPage('','UserAdd')">
                        <Icon type="md-add-circle"/>
                        添加
                    </Button>
                    <Button type="warning" :disabled="deleteBtnEnable" @click="remove">
                        <Icon type="md-close-circle"/>
                        删除
                    </Button>
                </ButtonGroup>
            </div>

            <div class="search-block">

                <i-input v-model="searchUserInput">
                    <i-select v-model="searchType" slot="prepend" style="width: 80px">
                        <i-option value="">全部</i-option>
                        <i-option value="name">姓名</i-option>
                        <i-option value="cardid">门禁卡</i-option>
                        <i-option value="department">部门名称</i-option>
                        <i-option value="unit">单位名称</i-option>
                        <i-option value="peopletype">角色类型</i-option>
                    </i-select>
                    <i-button slot="append" @click="searchUserEvent()" icon="ios-search"></i-button>
                </i-input>
            </div>
        </div>
        <Row>
            <Col>
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border
                       @on-select="tableItemChecked" @on-select-cancel="tableItemChecked"
                       @on-select-all="tableItemChecked"
                       @on-select-all-cancel="tableItemChecked"
                       style="margin-top:15px;">
                </Table>
            </Col>
        </Row>
        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="total" size="large" show-total :current="current" show-elevator show-sizer
                      @on-change="changePage"></Page>
            </div>
        </div>
        <!--修改密码弹出层-->
        <Modal v-model="setPwdIsShow" title="修改密码" @on-ok="handleSubmit('formValidate')"
               @on-cancel="setPwdIsShow =false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
                <Form-item label="原密码" prop="oldPwd">
                    <Input v-model="formValidate.oldPwd" placeholder="请输入原始密码"></Input>
                </Form-item>
                <Form-item label="新密码" prop="newPwd">
                    <Input v-model="formValidate.newPwd" placeholder="请输入新密码"></Input>
                </Form-item>
            </Form>
        </Modal>
    </div>
</template>
<script>

    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                total: 0,
                current: 1,
                //搜索
                searchUserInput: '',
                searchType: '',
                ////
                //修改密码
                setPwdIsShow: false,
                userId: '',
                formValidate: {
                    oldPwd: '',
                    newPwd: '',
                },
                ruleValidate: {},
                //操作按钮状态管理
                deleteBtnEnable: true,
                selectedItems: [],
                tableColumns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '姓名',
                        key: 'Displayname',
                        // width: 130,
                        align: 'center',
                    },
                    {
                        title: '性别',
                        key: 'Sex',
                        align: 'center',
                        // width: 130,
                        filters: [
                            {
                                label: '女',
                                value: 1
                            },
                            {
                                label: '男',
                                value: 2
                            }
                        ],
                        filterMultiple: false,
                        filterMethod(value, row) {
                            if (value === 1) {
                                return row.Sex == '女';
                            } else if (value === 2) {
                                return row.Sex == '男';
                            }
                        }
                    },
                    {
                        title: '电话',
                        key: 'Phone',
                        align: 'center',
                    },

                    {
                        title: '单位',
                        key: 'Unit',
                        align: 'center',
                    },
                    {
                        title: '部门',
                        key: 'Part',
                        align: 'center',
                    },
                    {
                        title: '军衔',
                        key: 'Militaryrank',
                        align: 'center',
                    },
                    {
                        title: '类型',
                        key: 'Right',
                        align: 'center',
                    },
                    {
                        title: '职务',
                        key: 'Duty',
                        // width: 130,
                        align: 'center',
                    },
                    // {
                    //     title: '门禁卡号',
                    //     key: 'Cardid',
                    //     // width: 130,
                    //     align: 'center',
                    // },
                    // {
                    //     title: '人员角色',
                    //     key: 'PeopleTypeTitle',
                    //     // width: 130,
                    //     align: 'center',
                    // },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        // fixed: 'right',
                        render: (h, params) => {
                            if (params.row.HasLoginInfo) {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            // color: '#17202b',
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'UserEdit')
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            // color: '#7d4844',
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.resetPwd(params.row);
                                            }
                                        }
                                    }, '重置'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'userClientDetail')
                                            }
                                        }
                                    }, '详情'),
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            // color: '#7d4844',
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id,'peopleSetRight');
                                            }
                                        }
                                    }, '权限'),
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            // color: '#7d4844',
                                            // 'margin-top': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.cancleLogin(params.row.Id);
                                            }
                                        }
                                    }, '禁用'),
                                ])
                            } else {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            // color: '#17202b',
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'UserEdit')
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'userClientDetail')
                                            }
                                        }
                                    }, '详情'),
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            // color: '#7d4844',
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'peopleSetRight');
                                            }
                                        }
                                    }, '权限'),
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            // color: '#7d4844',
                                            // 'margin-top': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.Id, 'UserAdd3');
                                            }
                                        }
                                    }, '启用'),
                                ])
                            }

                        }
                    }
                ]
            }
        },
        mounted() {
            this.mockTableData();
        },
        methods: {
            //跳转
            jumpPage: function (id, url) {
                //跳转
                let route = '';
                if (id > 0) {
                    route = {
                        path: url,
                        query: {
                            id: id
                        },
                    };
                } else {
                    route = {
                        path: url,
                    };
                }

                this.$router.push(route);
            },

            //图片预览
            preview(index) {
                console.log('进入tip预览__index', index);
                this.$imagePreview({
                    images: this.images,
                    index: index,
                })
            },
            mockTableData() {
                let that = this;

                let para = {
                    currPage: this.current,
                    pageSize: 10,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that, apiUtil.urls.userList, para, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalCount;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;
                    console.log('tableData:', res);
                });

            },
            resetPwd(row) {
                let that = this;
                this.$Modal.confirm({
                    title: '用户信息',
                    content: `确定重置密码吗`,
                    onOk: function () {
                        this.$Loading.start();
                        let para = {
                            id: row.Id,
                            loginAccount:row.Account,
                        };
                        let params = that.$qs.stringify(para);
                        apiUtil.post(that, apiUtil.urls.ResetUserLogin, params, function (res) {
                            that.$Notice.open({
                                title: '标题',
                                desc: res.Msg,
                                duration: 0
                            });

                        });
                    }
                })
            },
            ChangePasswordEvent(index) {
                let that = this;
                that.setPwdIsShow = true;
            },
            handleSubmit(name) {
                let that = this;
                let model = this.$refs[name].model;
                this.$refs[name].validate((valid) => {
                    that.comfirmModifyPS(model);
                })
            },
            comfirmModifyPS: function (model) {
                let that = this;
                model.id = this.userId;
                let params = that.$qs.stringify(model);
                apiUtil.post(that, apiUtil.urls.setCofigTspc, params, function (res) {
                });
            },
            changePage(row) {
                // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
                console.log("row", row);
                this.current = row;
                this.mockTableData();
            },
            searchUserEvent: function () {
                let that = this;
                let para = {
                    searchKey: this.searchUserInput,
                    searchType: this.searchType,
                };
                let params = that.$qs.stringify(para);

                apiUtil.get(that, apiUtil.urls.userList, para, function (res) {

                    that.tableData = res.Msg.Arrays;

                });
            },
            // 表格内选中及取消选中操作
            tableItemChecked: function (selection, row) {

                this.selectedItems = selection;
                console.log('选择删除项:', selection);

                if (this.selectedItems.length > 1) {
                    // 此处添加不要多选的提示
                    this.$Message.warning('此处不允许批量删除 ');
                    this.deleteBtnEnable = true;

                } else {
                    this.deleteBtnEnable = false;
                }
            },
            //删除
            remove: function () {
                let self = this;
                let that = this;
                this.$Modal.confirm({
                    title: '操作警告',
                    content: '即将删除选中的人员，该操作不可逆转，请确认您的操作。',
                    onOk: function () {
                        this.$Loading.start();
                        var selectedItemIds = "";
                        for (var i = 0; i < that.selectedItems.length; i++) {
                            selectedItemIds += that.selectedItems[i].Id.toString() + ",";
                        }
                        selectedItemIds = selectedItemIds.substring(0, selectedItemIds.length - 1);
                        let para = {id: selectedItemIds};
                        let params = that.$qs.stringify(para);

                        apiUtil.post(that, apiUtil.urls.userDelete, params, function (res) {
                            that.$Message.success('删除成功。');
                            that.mockTableData();
                        });
                    }
                });
            },
            //取消登录信息
            cancleLogin: function (id) {
                let that = this;
                let para = {
                    userId: id
                };
                let params = that.$qs.stringify(para);

                apiUtil.post(that, apiUtil.urls.CancelLoginInfo, params, function (res) {
                    that.mockTableData();
                });
            },
            //启用登录
            // cancleLogin:function () {
            //     let that = this;
            //     let para = {
            //         userId: this.searchUserInput
            //     };
            //     let params = that.$qs.stringify(para);
            //
            //     apiUtil.post(that, apiUtil.urls.CancelLoginInfo, params, function (res) {
            //         that.mockTableData();
            //     });
            // }
        },
    }
</script>
